<!doctype html>
<html>
<head>

<meta name="viewport"
	content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
<link rel="stylesheet"
	href="../../stylesheets/google/family.css">


<meta charset="utf-8">

<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

<!-- Use title if it's in the page YAML frontmatter -->
<title>Core Admin Theme</title>

<link href="../../stylesheets/application.css" media="screen"
	rel="stylesheet" type="text/css" />

<!--[if lt IE 9]>
  <script src="../../javascripts/vendor/html5shiv.js" type="text/javascript"></script>
  <script src="../../javascripts/vendor/excanvas.js" type="text/javascript"></script>
  <![endif]-->

<script src="../../javascripts/application.js" type="text/javascript"></script>
</head>



<body>
	<div class="container-fluid">
		<div class="row-fluid">

			<div class="area-top clearfix">
				<div class="pull-left header">
					<h3 class="title">
						<i class="icon-bar-chart"></i> Charts
					</h3>
					<h5>A subtitle can be added here</h5>
				</div>

				<ul class="inline pull-right sparkline-box">

					<li class="sparkline-row">
						<h4 class="blue">
							<span>Orders</span> 847
						</h4>
						<div class="sparkline big" data-color="blue">
							<!--15,3,16,19,23,21,14,19,15,18,12,13-->
						</div>
					</li>

					<li class="sparkline-row">
						<h4 class="green">
							<span>Reviews</span> 223
						</h4>
						<div class="sparkline big" data-color="green">
							<!--23,25,16,14,8,7,14,7,4,25,16,17-->
						</div>
					</li>

					<li class="sparkline-row">
						<h4 class="red">
							<span>New visits</span> 7930
						</h4>
						<div class="sparkline big">
							<!--21,22,25,14,19,14,10,11,26,11,15,3-->
						</div>
					</li>

				</ul>
			</div>
		</div>
	</div>

	<div class="container-fluid padded">
		<div class="row-fluid">

			<!-- Breadcrumb line -->

			<div id="breadcrumbs">
				<div class="breadcrumb-button blue">
					<span class="breadcrumb-label"><i class="icon-home"></i>
						Home</span> <span class="breadcrumb-arrow"><span></span></span>
				</div>



				<div class="breadcrumb-button">
					<span class="breadcrumb-label"> <i class="icon-bar-chart"></i>
						Charts
					</span> <span class="breadcrumb-arrow"><span></span></span>
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid padded">
		<div class="box">
			<div class="box-header">
				<span class="title">xCharts</span>
			</div>
			<div class="box-content padded">
				<div class="sine-chart" style="height: 300px" id="xchart-sine"></div>
			</div>
		</div>

		<div class="box">
			<div class="box-header">
				<span class="title">Gauges</span>
			</div>
			<div class="box-content padded" style="text-align: center">
				<div class="justgage" data-title="Normal" id="njQWbjKavp"></div>
				<div class="justgage" data-title="No labels" data-labels="false"
					id="ETsrgwKQPL"></div>
				<div class="justgage" data-title="Custom Width"
					data-gauge-width-scale="0.2" id="xTZ3nv3XCK"></div>
				<div class="justgage" data-title="Custom Animation"
					data-animation-type="bounce" id="GyxDLr9vjW"></div>
			</div>
		</div>

		<div class="row-fluid">

			<div class="span6">
				<div class="box">
					<div class="box-header">
						<span class="title">More xCharts</span>
					</div>
					<div class="box-content padded">
						<div class="xcharts-line-dotted"
							style="width: 100%; height: 300px"></div>
					</div>
				</div>
			</div>

			<div class="span6">
				<div class="box">
					<div class="box-header">
						<span class="title">More xCharts</span>
						<ul class="box-toolbar">
							<li><a id="randomize-bar-chart"
								class="btn btn-blue btn-mini">Randomize!</a></li>
						</ul>
					</div>
					<div class="box-content padded">
						<div class="xcharts-bar" style="width: 100%; height: 300px"></div>
					</div>
				</div>
			</div>
		</div>


		<div class="box">
			<div class="box-header">
				<span class="title">Easy Pie charts</span>
			</div>
			<div class="box-content padded separate-sections"
				style="text-align: center">
				<div class="easy-pie-chart"
					style="display: inline-block; margin-left: 20px;" data-percent="89">
					<span>89%</span>
				</div>
				<div class="easy-pie-chart"
					style="display: inline-block; margin-left: 20px;" data-percent="73"
					data-color="orange">
					<span>73%</span>
				</div>
				<div class="easy-pie-chart"
					style="display: inline-block; margin-left: 20px;" data-percent="33"
					data-color="green">
					<span>33%</span>
				</div>
				<div class="easy-pie-chart"
					style="display: inline-block; margin-left: 20px;" data-percent="64"
					data-color="blue">
					<span>64%</span>
				</div>
			</div>
		</div>


		<div class="box">
			<div class="box-header">
				<span class="title">Responsive Sparkline charts</span>
			</div>
			<div class="box-content padded">
				<div class="row-fluid separate-sections">

					<div class="span2">
						<div class="spark-pie"></div>
					</div>

					<div class="span4">
						<div class="spark-mouse"></div>
					</div>

					<div class="span4">
						<div class="spark-composite"></div>
					</div>

					<div class="span2 separate-sections text-center">
						<div class="sparkline big">
							<!--21,11,6,16,28,20,8,23,5,19,13,9-->
						</div>
						<div class="sparkline big" data-color="blue">
							<!--28,15,22,8,8,6,9,13,7,16,22,3-->
						</div>
						<div class="sparkline big" data-color="orange">
							<!--28,5,9,28,12,21,29,18,22,13,3,11-->
						</div>
						<div class="sparkline big" data-color="green">
							<!--16,17,23,7,22,24,25,24,21,5,12,13-->
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</body>
</html>
